<template>
  <div class="dashboard-container">
    <div class="app-container">
    <el-card shadow="never">
      <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
        <span style="font-size: 12px; color: pink">说明：目前支持学科和关键字条件筛选
        </span>
        <el-button
          type="success"
          icon="el-icon-edit"
          style="font-size: 12px"
          @click="$router.push('/questions/new')"
        >
          新增试题
        </el-button>
      </el-row>
      <questionForm @searchQuestion="searchQuestion" @clearSearch="clearSearch"/>
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable="false"/>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        :header-cell-style="headerStyle"
      >
        <el-table-column prop="number" label="试题编号"/>
        <el-table-column prop="subject" label="学科"/>
        <el-table-column prop="catalog" label="目录"/>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatQuestionType"/>
        <el-table-column prop="question" label="题干">
          <template v-slot="{ row }">
            {{ row.question | html2Text }}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="formatDifficulty"/>
        <el-table-column prop="creator" label="录入人"/>
        <el-table-column label="操作" width="200px">
          <template v-slot="{ row }">
            <el-row type="flex">
              <el-tooltip class="item" effect="dark" content="预览">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-view"
                  circle
                  plain
                  @click="preview(row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑">
                <el-button
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  circle
                  plain
                  @click="editQusetion(row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除">
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  @click="delQusetion(row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="加入精选">
                <el-button
                  size="small"
                  type="warning"
                  icon="el-icon-star-off"
                  circle
                  plain
                  @click="choiceAdd(row.id)"
                ></el-button>
              </el-tooltip>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next ,sizes ,jumper"
          :total="total"
          style="margin-top: 20px"
          :page-sizes="[5, 10, 20, 50]"
          :current-page.sync="params.page"
          :page-size.sync="params.pagesize"
          @size-change="getQuestionList()"
          @current-change="getQuestionList()"
        >
        </el-pagination>
      </el-row>
      <!-- 预览弹窗 -->
      <questionDialog
        :showQuestionDialog.sync="showQuestionDialog"
        ref="questionDialog"
      ></questionDialog>
    </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import questionDialog from '@/module-hmmm/components/question-dialog'
import questionForm from '@/module-hmmm/components/question-form'
export default {
  components: {
    questionDialog,
    questionForm
  },
  data () {
    return {
      showQuestionDialog: false,
      tableData: [],
      params: {
        page: 1,
        pagesize: 5
      },
      total: 0
    }
  },
  async created () {
    await this.getQuestionList()
  },
  methods: {
    async getQuestionList (searchData = {}) {
      const { data } = await list({ ...this.params, ...searchData })
      this.tableData = data.items
      this.total = data.counts
    },
    // 格式化题型
    formatQuestionType (row) {
      const res = questionType.find(
        (item) => item.value === Number(row.questionType)
      )
      return res?.label ? res.label : '未知'
    },
    // 格式化难度
    formatDifficulty (row) {
      const res = difficulty.find(
        (item) => item.value === Number(row.difficulty)
      )
      return res?.label ? res.label : '未知'
    },
    // 表头行样式
    headerStyle () {
      return 'border-bottom: 3px solid #e8e8e8;background-color: #fafafa;'
    },
    // 预览按钮
    async preview (id) {
      await this.$refs.questionDialog.getQuestionDetail(id)
      this.showQuestionDialog = true
    },
    // 删除按钮
    async delQusetion (id) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id })
        // 刷新页面数据
        const totalPage = Math.ceil((this.total - 1) / this.params.pagesize)
        if (this.params.page > totalPage) {
          this.params.page = totalPage
        }
        this.getQuestionList()
        // 提示用户
        this.$message.success('删除成功')
      } catch {
        this.$message('您已取消删除')
      }
    },
    // 编辑按钮
    editQusetion (id) {
      this.$router.push({ name: 'questions-new', query: { id } })
    },
    // 加入精选按钮
    async choiceAdd (id) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '选择确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await choiceAdd({ id, choiceState: 1 })
        // 刷新页面数据
        this.getQuestionList()
        // 页面跳转精选页
        this.$router.push('/questions/choice')
        // 提示用户
        this.$message.success('加入精选成功')
      } catch {
        this.$message('您已取消加入精选')
      }
    },

    // 搜索按钮
    searchQuestion (data) {
      this.getQuestionList(data)
    },
    // 清除搜索
    clearSearch () {
      this.getQuestionList()
    }
  }
}
</script>

<style scoped></style>
